<template>
  <view>
    <view class="search">
      <u-search
        class="left"
        placeholder="请输入用户名称"
        @change="selectcard"
        :bgColor="searchstyle"
        :borderColor="borderstyle"
        :showAction="false"
        v-model="keyword"
      ></u-search>
      <view class="backtop">
        <u-button
          type="primary"
          @click="topback"
          class="custom-style"
          :plain="true"
          size="mini"
          text="刷新"
        ></u-button>
      </view>
    </view>

    <view v-if="empty == 'isempty'" class="empty">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>

    <view class="section">
      <u-list
        :scrollTop="20"
        height="620"
        :style="height"
        :enableBackToTop="true"
        v-if="empty == 'notempty'"
        :preLoadScreen="page * 5"
        @scrolltolower="scrolltolower"
      >
        <u-list-item v-for="item in levellist" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              @click="action"
              :name="item.id"
              :disabled="item.leveid== 0 ? false  : true"
              :options="options"
            >
              <view class="card" @click="toEdit({ busid: item.id })">
                <view class="left">
                  <view class="img">
                    <u-image
                      :src="item.userhead"
                      shape="circle"
                      width="80px"
                      height="80px"
                    >
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text flax">
                    <h5>用户名称:</h5>
                    <span class="flax-span" v-if="item.nickname != ''">{{
                      item.nickname
                    }}</span>
                    <span class="flax-span" v-else>{{ "用户昵称未知" }}</span>
                  </view>
                  <view class="text">
                    <span>手机号:</span>
                    <span>{{ item.mobile }}</span>
                  </view>
                  <view class="text">
                    <span>创建时间:</span>
                    <span>{{ item.createtime_text }}</span>
                  </view>

                  <view class="text">
                    <span>是否会员:</span>
                    <span>{{ item.levelname_text }}</span>
                  </view>
                  <!-- 
                  <view class="text">
                    <span>服务简介:</span>
                    <span>{{ item.detaile }}</span>
                  </view> -->
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>

        <u-loadmore
          :status="status"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
        />
      </u-list>
    </view>

    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.auth = this.$u.auth.check();

    this.list();
  },
  created() {
    setInterval(() => {
      this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      status: "loading",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      busid: 0,
      padding: "150rpx 0rpx",
      auth: {},
      page: 1,
      empty: "",
      keyword: "",
      searchstyle: "#ffffff",
      borderstyle: "#eee",
      levellist: [],
      show: false,
      options: [
        {
          text: "修改",
          style: {
            backgroundColor: "#3c9cff",
          },
        },
      ],
    };
  },
  methods: {
    action(item) {
      // 修改
      if (item.index == 0) {
        uni.$u.route({
          url: "/pages/business/carpark/edit",
          params: {
            busid: item.name,
          },
        });
      }
    },

    selectcard(e) {
      this.levellist = [];

      this.page = 1;

      // 直接赋值
      this.keyword = e;
      // 然后调用
      this.list();
    },
    async list() {
      // 最高管理员需传输的数据
      let data = {
        stoid: this.auth.stoid,
        page: this.page,
        keyword: this.keyword,
        adminid: this.auth.id,
      };
      var result = await this.$u.api.business.businesslist(data);

      if (result.code) {
        this.empty = "notempty";

        if (Array.isArray(result.data) && result.data.length > 0) {
          this.levellist = this.levellist.concat(result.data);

          this.page++;
        } else {
          this.status = "nomore";
        }
      } else {
        this.empty = "isempty";
      }
    },

    async selectStatues(e) {
      this.levellist = [];
      this.page = 1;
      this.keyword = "";
      this.typeid = e.typeid;
      this.list();
    },

    toEdit(e) {
      this.$u.route({
        url: "/pages/business/carpark/list/index",
        params: {
          busid: e.busid,
        },
      });
    },
    scrolltolower() {
      this.list();
    },
    topback() {
      uni.reLaunch({
        url: "/pages/business/carpark/index",
      });
    },
  },
};
</script>

<style scoped  lang="scss" >
.section {
  margin: 60px 0px;
}

.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}

.empty {
  margin-top: 50px;
}

.search {
  width: 70%;
  position: fixed;
  top: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 9%;
  z-index: 999;
}

.card {
  display: flex;
  width: 92%;
  height: 135px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 30px;
    }
  }

  .right {
    width: 62%;
    margin-top: 35px;

    .text {
      h5 {
        // 超出一定长度变成三个点
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
    }
  }
}

.content {
  background: #ffffff;
}
.flax {
  display: flex;
  align-items: center;
  .flax-span {
    font-size: 14px !important;
    color: #000 !important;
  }
}
</style>